<template>
  <div style="width: 55%; margin-left: 20px">
    <el-card class="present-card" style="height: 236px;">
      <div style="height: 50px;display: flex;">
          <h3 style="line-height: 20px; ">分类结果</h3>
          <div style="margin-left: 500px; display: flex;">
            <h3 >选择模型:</h3>
            <el-select v-model="value" placeholder="请选择"
            style="margin-top: 10px;">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </div>
      </div>
      <div v-show="value == '选项1'" style="height: 140px; margin-top: 10px;">
        <el-descriptions :data="model_1" :column="2" :label-style="LS" :content-style="LD"
        style="position: relative; top: 30px;">
          <el-descriptions-item label="模型名称">{{ model_1.model_kind }}</el-descriptions-item>
          <el-descriptions-item label="是否安全">{{ model_1.Is_safe }}</el-descriptions-item>
          <el-descriptions-item label="判别种类">{{ model_1.result_kind }}</el-descriptions-item>
          <el-descriptions-item label="预测准确率">{{ model_1.accuracy }}</el-descriptions-item>
      </el-descriptions>
      </div>
      <div v-show="value == '选项2'" style="height: 140px; margin-top: 10px;">
        <el-descriptions :data="model_2" :column="2" :label-style="LS" :content-style="LD"
        style="position: relative; top: 30px;">
          <el-descriptions-item label="模型名称">{{ model_2.model_kind }}</el-descriptions-item>
          <el-descriptions-item label="是否安全">{{ model_2.Is_safe }}</el-descriptions-item>
          <el-descriptions-item label="判别种类">{{ model_2.result_kind }}</el-descriptions-item>
          <el-descriptions-item label="预测准确率">{{ model_2.accuracy }}</el-descriptions-item>
      </el-descriptions>
      </div>
      <div v-show="value == '选项3'" style="height: 140px; margin-top: 10px;">
        <el-descriptions :data="model_3" :column="2" :label-style="LS" :content-style="LD"
        style="position: relative; top: 30px;">
          <el-descriptions-item label="模型名称">{{ model_3.model_kind }}</el-descriptions-item>
          <el-descriptions-item label="是否安全">{{ model_3.Is_safe }}</el-descriptions-item>
          <el-descriptions-item label="判别种类">{{ model_3.result_kind }}</el-descriptions-item>
          <el-descriptions-item label="预测准确率">{{ model_3.accuracy }}</el-descriptions-item>
      </el-descriptions>
      </div>
      <div v-show="value == '选项4'" style="height: 140px; margin-top: 10px;">
        <el-descriptions :data="model_4" :column="2" :label-style="LS" :content-style="LD"
        style="position: relative; top: 30px;">
          <el-descriptions-item label="模型名称">{{ model_4.model_kind }}</el-descriptions-item>
          <el-descriptions-item label="是否安全">{{ model_4.Is_safe }}</el-descriptions-item>
          <el-descriptions-item label="判别种类">{{ model_4.result_kind }}</el-descriptions-item>
          <el-descriptions-item label="预测准确率">{{ model_4.accuracy }}</el-descriptions-item>
      </el-descriptions>
      </div>
      </el-card>
      <br>
  </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        model_1: [],
        model_2: [], 
        model_3: [], 
        model_4: [],   
        baseURL: "http://localhost:8000/",
        LS:{color:'#000'},
        LD:{size:'xxx-larger'},
        ID:[],
        options:[
          {
              value:'选项1',
              label:'ResNet'
          },
          {
              value:'选项2',
              label:'随机森林'
          },
          {
              value:'选项3',
              label:'k近邻'
          },
          {
              value:'选项4',
              label:'SVM'
          },
        ],
        value: '选项1'
      }
    },
  
    mounted() {
      this.savedata();
      this.getMessages();
    },
  
    methods: {
      savedata() {
        var item = localStorage.getItem("data");
        var parse = JSON.parse(item);
        this.ID = parse["Apk_info_id"];
      },
      getMessages:function(){
        //记录this的地址
        let that = this
        //使用Axios实现Ajax请求
        that.axios.get(that.baseURL+"apk/model_predict/"+that.ID+"/")
        .then(function(res){
          //请求成功后执行的函数
          that.model_4 = res.data[0];
          that.model_3 = res.data[1];
          that.model_2 = res.data[2];
          that.model_1 = res.data[3];

        })
        .catch(function(err){
          //请求失败后执行的函数
          console.log(err)
        })
      },
    }
  
  }
  </script>
  
  <style>
  
  </style>
